"use client"

import Link from "next/link";

const HEADERS_DEFAULT = {
  // "Content-Type"  : "application/json; charset=utf-8",
  "Content-Type": 'application/json',
  "Accept": 'application/json',
}

export default function Page() {
  const onAddNew = async () => {
    const payload = {
      name: 'Max',
    }
    const rslt = await fetch(
      "/demo/route-api/mock",
      {
        method: 'POST',
        body: JSON.stringify(payload)
      }
    )
    console.log(rslt)
  }

  const onUpdate = async () => {
    const payload = {
      name: 'Mary',
    }
    const rslt = await fetch(
      "/demo/route-api/mock",
      {
        method: 'PUT',
        body: JSON.stringify(payload)
      }
    )
    console.log(rslt)
  }

  const onDelete = async () => {
    const rslt = await fetch(
      "/demo/route-api/mock",
      {
        method: 'DELETE',
      }
    )
    console.log(rslt)
  }

  const onGet = async () => {
    const rslt = await fetch(
      "/demo/route-api/mock",
      {
        method: 'GET',
        headers: { ...HEADERS_DEFAULT },
      }
    )
    console.log(rslt)
    console.log(await rslt.json())
  }

  return (
    <main>
      <h1 className="text-7xl">Route Page</h1>
      <ol>
        <Link href="/demo/route-api/text">
          <li>
            GET (text)
            <p>cache in production</p>
            <p>disable cache : force-dynamic</p>
          </li>
        </Link>

        <Link href="/demo/route-api/functions">
          <li>
            GET
            <p>Response headers & cookies</p>
            <p>headers & cookies function</p>
            <p>get & set</p>
            <p>redirect</p>
          </li>
        </Link>

        <li onClick={onGet}>GET (json)</li>
        <Link href="/demo/route-api/mock?name=Tom"><li>query parameters</li></Link>

        <li onClick={onAddNew}>POST (json)</li>
        <li onClick={onUpdate}>PUT (last item)</li>
        <li onClick={onDelete}>DEL (last item)</li>
        <Link href="/demo/route-api/mock/1"><li>[id]</li></Link>
      </ol>
    </main>
  )
}
